<template>
    <el-dialog
      title="编辑个人信息"
      v-model="internalVisible"
      width="30%"
      @close="closeDialog"
    >
      <!-- 表单内容 -->
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="用户名" prop="nam">
          <el-input v-model="form.nam" placeholder="请输入用户名"></el-input>
        </el-form-item>
  
        <el-form-item label="简介" prop="note">
          <el-input type="textarea" v-model="form.note" placeholder="请输入简介"></el-input>
        </el-form-item>

        <el-form-item label="学校" prop="school">
          <el-input v-model="form.school" placeholder="请输入学校"></el-input>
        </el-form-item>

        <el-form-item label="学院" prop="academy">
          <el-input v-model="form.academy" placeholder="请输入学院"></el-input>
        </el-form-item>


    <!-- 添加省市区选择 -->
    <el-form-item label="地区" prop="location">
      <el-cascader
        :options="regionOptions"
        :props="{ value: 'name', label:'name',children: 'children' }"
        placeholder="请选择省市"
        @change="handleLocationChange"
      />
    </el-form-item>

      </el-form>
      <!-- 弹窗的底部操作按钮 -->
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    name: 'EditPage',
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      userinfo: {
        type: Object,
        default: () => ({ nam: '', note: '' ,school:'',academy:'',province:'',city:''}),
      },
    },
    emits: ['close', 'update'],
    setup(props, { emit }) {
      const internalVisible = ref(props.visible);
  
      // 表单数据，初始化为父组件传入的 userinfo
      const form = ref({
        nam: props.userinfo.nam,
        note: props.userinfo.note,
        school:props.userinfo.school,
        academy:props.userinfo.academy,
        province:props.userinfo.province,
        city:props.userinfo.city,
      });
      // 表单验证规则
      const rules = {
        nam: [
          { required: true, message: '名称不能为空', trigger: 'blur' },
        ],
       note: [
          { required: true, message: '简介不能为空', trigger: 'blur' },
        ],
        school: [
          { required: true, message: '学校不能为空', trigger: 'blur' },
        ],
        academy: [
          { required: true, message: '学院不能为空', trigger: 'blur' },
        ],
      };
  
      const formRef = ref(null);
  
      // 监听 visible 的变化
      watch(
        () => props.visible,
        (newVal) => {
          internalVisible.value = newVal;
          if (newVal) {
            // 重置表单数据为父组件传入的数据
            form.value = { ...props.userinfo };
          }
        }
      );
  
      // 关闭弹窗
      const closeDialog = () => {
        internalVisible.value = false;
        emit('close'); // 通知父组件关闭
        resetForm();
      };
  
      // 重置表单
      const resetForm = () => {
        form.value = { ...props.userinfo };
        if (formRef.value) formRef.value.clearValidate();
      };
  
      // 提交表单
      const submitForm = () => {
        formRef.value.validate((valid) => {
          if (valid) {
            emit('update', form.value); // 提交更新的表单数据
            closeDialog();
          } else {
            ElMessage.error('请检查表单输入');
          }
        });
      };
    
     const handleLocationChange= (value) => {
      form.value.province = value[0] || ""; // 选中的省
      form.value.city = value[1] || ""; // 选中的市
    }



    // 初始化选中值
    const selectedLocation = ref([]); // v-model 绑定的响应式数据

    // 省市数据
    const regionOptions = ref([
      {
        name: "北京市",
        children: [{ name: "东城区" }, { name: "西城区" }, { name: "朝阳区" }]
      },
      {
        name: "广东省",
        children: [
          { name: "广州市" },
          { name: "深圳市" },
          { name: "珠海市" }
        ]
      },
      {
        name: "浙江省",
        children: [{ name: "杭州市" }, { name: "宁波市" }, { name: "温州市" }]
      }
    ]);

      return {
        internalVisible,
        form,
        formRef,
        closeDialog,
        submitForm,
        rules,
        selectedLocation,regionOptions,handleLocationChange
      };
    },
  };
  </script>
  
  <style scoped>
  </style>